fix(sidebar): Improve Sidebar layout and alignment styles#1430
fix(sidebar): Improve Sidebar layout and alignment styles#1430TouchSeyha wants to merge 3 commits intopingdotgg:mainfrom
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| {isElectron ? ( | ||
| <> | ||
| <SidebarHeader className="drag-region h-[52px] flex-row items-center gap-2 px-4 py-0 pl-[90px]"> | ||
| <SidebarHeader className="drag-region relative h-13 flex-row items-center justify-center gap-2 px-4 py-0"> |
There was a problem hiding this comment.
Removed macOS traffic light padding causes content overlap
High Severity
The pl-[90px] left padding on the Electron SidebarHeader was removed in favor of justify-center. That padding existed specifically to prevent content from overlapping with macOS traffic light buttons (close/minimize/maximize), which are rendered over the sidebar at trafficLightPosition: { x: 16, y: 18 } via titleBarStyle: "hiddenInset" in apps/desktop/src/main.ts. The sidebar is fixed at left-0, so the centered wordmark will now overlap with the macOS window control buttons.
e6ee07e to
1f0e0f3
Compare
|
looks odd. i think it should be left aligned CleanShot.2026-03-28.at.11.59.20.mp4 |


What Changed
Layout and alignment improvements:
wordmarkand sidebar header content by updating flex and alignment classes, ensuring consistent appearance across different screen sizes and environments. [1] [2]Visual and sizing adjustments:
items-centerto the non-Electron header.Why
UI Changes
Before
after
Demo
Demo.t3code.mp4
Checklist
Note
Low Risk
Low risk UI-only change that adjusts Tailwind layout classes in the sidebar header; main risk is minor visual regressions across Electron vs web breakpoints.
Overview
Sidebar header layout is re-aligned for consistent centering. The
wordmarkcontainer now spans full width and centers its contents instead of usingflex-1/min-w-0left-aligned behavior.In Electron, the header is made
relative/center-justified and the desktop update (rocket) button is moved to an absolutely positioned right-aligned container to avoid overlap; the non-Electron header addsitems-centerfor consistent vertical alignment.Written by Cursor Bugbot for commit c4397f0. This will update automatically on new commits. Configure here.
Note
[!NOTE]
Fix sidebar header layout and alignment styles
SidebarHeaderuses a relative container with centered content andh-13height; the desktop update button is absolutely positioned at the right edge and vertically centered.SidebarHeaderaddsitems-centerto vertically align content.Macroscope summarized c4397f0.